import { createApi, updateApi } from '@/services/channel/spapi_api';
import { ModalForm, ProForm, ProFormDigit, ProFormRadio, ProFormSelect, ProFormText } from '@ant-design/pro-components';
import { message } from 'antd';
import React, { useEffect } from 'react';
import { FormattedMessage, useIntl } from 'umi';

interface CreateModalProps {
    visible: boolean;
    onCancel: () => void;
    onSuccess: () => void;
    values?: Partial<ApiService>;
}

const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
};

const EditForm: React.FC<CreateModalProps> = ({ visible, values, onCancel, onSuccess }) => {
    const [form] = ProForm.useForm<ApiService>();
    const intl = useIntl();

    useEffect(() => {
        if (visible) {
            form.resetFields();
            form.setFieldsValue({
                asStatus: '1',
                serviceType: '1',
                labelPre: '1',
                ...(values || {})
            });
        }
    }, [visible, values]);

    const handleSubmit = async (formValues: ApiService) => {
        try {
            const response = values?.asId
                ? await updateApi({ ...formValues, asId: values.asId })
                : await createApi(formValues);

            if (response.code != 0) {
                message.error(intl.formatMessage({ id: 'request.error.operating' }) + response?.msg);
                return false;
            }

            message.success(intl.formatMessage({ id: 'request.success.operating' }));
            onSuccess();
            form.resetFields();
            return true;
        } catch (error) {
            message.error(intl.formatMessage({ id: 'request.error.retry' }));
            return false;
        }
    };

    return (
        <ModalForm<ApiService>
            title={values?.asId
                ? intl.formatMessage({ id: 'pages.edit' })
                : intl.formatMessage({ id: 'pages.create' })}
            width={800}
            form={form}
            open={visible}
            onOpenChange={(visible) => !visible && onCancel()}
            onFinish={handleSubmit}
            autoFocusFirstInput
            modalProps={{
                destroyOnClose: true,
                maskClosable: false,
            }}
            submitter={{
                searchConfig: {
                    submitText: intl.formatMessage({ id: 'pages.button.submit' }),
                    resetText: intl.formatMessage({ id: 'pages.button.cancel' }),
                },
            }}
            layout="horizontal" {...formItemLayout}
        >
            <ProFormText
                name="asCode"
                label={intl.formatMessage({ id: 'pages.apiForm.asCode' })}
                placeholder={intl.formatMessage({ id: 'pages.apiForm.asCode.placeholder' })}
                disabled={!!values?.asId}
                rules={[{
                    required: true,
                    message: intl.formatMessage({ id: 'pages.apiForm.asCode.required' })
                }]}
            />

            <ProFormText
                name="asName"
                label={intl.formatMessage({ id: 'pages.apiForm.asName' })}
                placeholder={intl.formatMessage({ id: 'pages.apiForm.asName.placeholder' })}
                rules={[{
                    required: true,
                    message: intl.formatMessage({ id: 'pages.apiForm.asName.required' })
                }]}
            />

            <ProFormRadio.Group
                name="asStatus"
                label={intl.formatMessage({ id: 'pages.apiForm.asStatus' })}
                rules={[{ required: true }]}
                options={[
                    {
                        label: intl.formatMessage({ id: 'pages.active' }),
                        value: '0',
                    },
                    {
                        label: intl.formatMessage({ id: 'pages.inactive' }),
                        value: '1',
                    },
                ]}
            />

            <ProFormSelect
                name="serviceType"
                label={intl.formatMessage({ id: 'pages.apiForm.serviceType' })}
                valueEnum={{
                    1: intl.formatMessage({ id: 'pages.apiForm.serviceType.logistics' }),
                    2: intl.formatMessage({ id: 'pages.apiForm.serviceType.addressValidation' }),
                }}
            />

            <ProFormSelect
                name="labelPre"
                label={intl.formatMessage({ id: 'pages.apiForm.labelPre' })}
                valueEnum={{
                    1: intl.formatMessage({ id: 'pages.yes' }),
                    0: intl.formatMessage({ id: 'pages.no' }),
                }}
            />

            <ProFormText
                name="asAddress"
                label={intl.formatMessage({ id: 'pages.apiForm.asAddress' })}
                placeholder={intl.formatMessage({ id: 'pages.apiForm.asAddress.placeholder' })}
                rules={[{
                    required: true,
                    message: intl.formatMessage({ id: 'pages.apiForm.asAddress.required' })
                }]}
            />

            <ProFormText
                name="asUser"
                label={intl.formatMessage({ id: 'pages.apiForm.asUser' })}
                placeholder={intl.formatMessage({ id: 'pages.apiForm.asUser.placeholder' })}
            />

            <ProFormText
                name="asPwd"
                label={intl.formatMessage({ id: 'pages.apiForm.asPwd' })}
                placeholder={intl.formatMessage({ id: 'pages.apiForm.asPwd.placeholder' })}
            />

            <ProFormText
                name="asToken"
                label={intl.formatMessage({ id: 'pages.apiForm.asToken' })}
                placeholder={intl.formatMessage({ id: 'pages.apiForm.asToken.placeholder' })}
            />

            <ProFormText
                name="asKey"
                label={intl.formatMessage({ id: 'pages.apiForm.asKey' })}
                placeholder={intl.formatMessage({ id: 'pages.apiForm.asKey.placeholder' })}
            />

            <ProFormText
                name="asApplication"
                label={intl.formatMessage({ id: 'pages.apiForm.asApplication' })}
                placeholder={intl.formatMessage({ id: 'pages.apiForm.asApplication.placeholder' })}
            />

            <ProFormText
                name="serviceLevel"
                label={intl.formatMessage({ id: 'pages.apiForm.serviceLevel' })}
                placeholder={intl.formatMessage({ id: 'pages.apiForm.serviceLevel.placeholder' })}
            />

            <ProFormText
                name="other"
                label={intl.formatMessage({ id: 'pages.apiForm.other' })}
                placeholder={intl.formatMessage({ id: 'pages.apiForm.other.placeholder' })}
            />

            <ProFormText
                name="remark"
                label={intl.formatMessage({ id: 'pages.apiForm.remark' })}
                placeholder={intl.formatMessage({ id: 'pages.apiForm.remark.placeholder' })}
            />
        </ModalForm>
    );
};

export default EditForm;